<template>
  <div>
    <van-index-bar :index-list="indexList" :sticky="false"  class="head">
      <template v-for="(item, index) in citylist">
        <van-index-anchor :key="index" :index="item.initial" />

        <van-cell @click="goHome(i.name)"
          v-for="(i, ind) in item.list"
          :key="index + '-' + ind"
          :title="i.name"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "CityList",
  //i o u v这四个字母要去掉
  data() {
    return {
      citylist: [],
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  mounted() {
    axios.get("./json/city.json").then((res) => {
      console.log(res);
      this.citylist = res.data.city;
    });
  },
    methods: {
      goHome(cityname) {
        console.log(cityname);
        this.$router.push({name:'cinema',params:{cityname:cityname,flag:false}}).catch(()=>{})
      },
    },
};
</script>

<style scoped lang="less">
.head{
  background: #f7f8fa;
}

</style>